<template>
	<view class="eatView">
		<!-- #ifndef MP -->
		<view class="view_title">逛吃</view>
		<!-- #endif -->

		<template v-if="isShow == false">
			<scroll-view scroll-y="auto" @scrolltolower="scrolltolower" class="view_list">
			      <EatItem class="view_item" v-for="(item, index) in EatList" :key="index" :item="item"></EatItem>
			</scroll-view> 
				<u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
		</template>

		<template v-else>
			<u-loading-page></u-loading-page>
		</template>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				page: 1, //分页
				EatList: [], //图片数据
				isShow: false,
				isLoading:false,
			};
		},
		created: function() {
			this.Axios();
			this.isShow = true;
			uni.request({
				url: `https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/feeds/category_feed?page=${this.page}&category=1&per=10`,
				success: (res) => {
					this.EatList = res.data.feeds;
					this.isShow = false;
				}
			})
		},
		methods: {
			Axios: function() {
				this.isLoading = true;
				uni.request({
					url: `https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/feeds/category_feed?page=${this.page}&category=1&per=10`,
					success: (res) => {
						if (this.page > 1) {
							this.EatList = this.EatList.concat(res.data.feeds);
						} else {
							this.EatList = res.data.feeds;
						}
						setTimeout(()=>{
							this.isLoading = false;
						},500)
					}
				})
			},
			scrolltolower: function() {
				this.page++;
				this.Axios();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.eatView {
		.view_title {
			height: 100rpx;
			background: white;
			line-height: 100rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #e6e5e7;
		}

		.view_list {
			padding: 0 45rpx;
			box-sizing: border-box;
			height: 80vh;

			.loadig {
				position: fixed;
				left: 45%;
				right: 45%;
				z-index: 6;
			}
			.view_item {
				margin: 20px 5px;
			}
		}
	}
</style>
